﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_well.cshtml";
    ViewBag.Title = "历史示功图";
}

<div class="xds-no-breadcrumb">
    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div class="row border-bottom page-heading" style="padding:0 20px 10px 20px">
                <div class="row">
                    <div class="col-sm-3">
                        <h2 style="float:left">历史示功图</h2>
                    </div>
                    <div class="col-sm-5">
                        <label class="font-noraml">选择时间段：</label>
                        <div class="form-group" id="data_5">
                            <div class="input-daterange input-group" id="datepicker">
                                <input type="text" class="input-sm form-control" name="start" id="startdate" />
                                <span class="input-group-addon">到</span>
                                <input type="text" class="input-sm form-control" name="end" id="enddate" />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label class="font-noraml">&nbsp;</label>
                        <div class="form-group">
                            <button type="button" onclick="huizhi()" class="btn btn-w-m btn-primary" style="float:right;">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight ecommerce">
                <div id="main" class="container-fluid">
                    <div class="row" id="main-row"></div>
                </div>
                <div id="Pagination" class="pagination"></div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    @Styles.Render("~/plugins/dataPickerStyles")
    @Styles.Render("~/plugins/sweetAlertStyles")
<style type="text/css">
    .xdstable > tbody > tr > td{
        padding:5px !important;
    }
    </style>
}

@section Scripts {
    @Scripts.Render("~/plugins/dataPicker")
    @Scripts.Render("~/bundles/echarts")
    @Scripts.Render("~/bundles/pagination")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        var charts = [];
        $(document).ready(function () {
            $("#startdate").attr("value", new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate());
            $("#enddate").attr("value", new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate());
            $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
            $('.xds-minimalize').click(function () {
                setTimeout("ReDrawChart()", 400);
            });
        })
        function ReDrawChart() {
            $(charts).each(function (index, chart) {
                chart.resize();
            });
        }
        function huizhi() {
            $.ajax({
                url: '/Indicator/History',
                data: { wellid: sessionStorage.wellid, starttime: $("#startdate").val() + " 00:00:00", endtime: $("#enddate").val() + " 23:59:59" },
                type: 'post',
                async: false,
                dataType: 'json'
            }).success(function (result) {
                var num_entries = Math.floor(result.totalnum / 16 + 1);
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 1, //边缘页数
                    num_display_entries: 4, //主体页数
                    callback: pageselectCallback,
                    items_per_page: 1, //每页显示1项
                    prev_text: "前一页",
                    next_text: "后一页"
                });
            }).error(function () {
                swal({
                    title: "Welcome in Alerts!",
                    text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                });
            });
        }
        function pageselectCallback(page_index, jq) {
            $.ajax({
                url: '/Indicator/History',
                data: { wellid: sessionStorage.wellid, starttime: $("#startdate").val() + " 00:00:00", endtime: $("#enddate").val() + " 23:59:59", page: page_index + 1 },
                type: 'post',
                async: false,
                dataType: 'json'
            }).success(function (result) {
                $('#main-row').empty();
                $.each(result.data, function (i, item) {
                    var jiaobian = (item.maxload - item.minload).toFixed(2);
                    //$('#main-row').append('<div id="' + item.Datetime + '" class="col-md-6 col-lg-4" style="height: 200px;"></div>');
                    $('#main-row').append('<div class="col-md-6 col-lg-4" style="display:block"><div id="' + item.Datetime + '" style="height:200px;width:100%"></div><div id="' + item.Datetime + '-2" style="height:auto;width:90%;margin-left:5%;display:block" ><table class="table table-striped xdstable"><thead><tr><th></th></tr></thead><tbody style="font-size:8px">'
    + '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '冲    程' + '</td><td>' + item.Stroke + '(米)</td><td><img src="/Images/circle.jpg"/></td><td>' + '冲    次' + '</td><td>' + item.Stroketimes + '(次)</td></tr>'
    + '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '最小载荷' + '</td><td>' + item.minload + '(KN)</td><td><img src="/Images/circle.jpg"/></td><td>' + '最大载荷' + '</td><td>' + item.maxload + '(KN)</td></tr>'
    + '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '上行电流' + '</td><td>' + item.UpCurrent + '(A)</td><td><img src="/Images/circle.jpg"/></td><td>' + '下行电流' + '</td><td>' + item.DownCurrent + '(A)</td></tr>'
    + '<tr><td><img src="/Images/circle.jpg"/></td><td>' + '交变载荷' + '</td><td>' + jiaobian + '(KN)</td></tr>'
    + '</tbody></table></div></div>');
                    showechart(item.Datetime, item.Indd_Data_Disp, item.Indd_Data_Load);
                });
            }).error(function () {
                swal({
                    title: "Welcome in Alerts!",
                    text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                });
            });
            return false;
        }
        function showechart(chartId, xdata, ydata) {
            var myChart = echarts.init(document.getElementById(chartId));
            var data = [];

            for (var i = 0; i < xdata.length; i++) {
                var temp = [];
                temp.push(xdata[i]);
                temp.push(ydata[i]);
                data.push(temp);
            }
            var option = {
                title: {
                    left: 'center',
                    text: '井号：'+sessionStorage.wellname+' 时间：'+ chartId,
                    textStyle: {
                        fontSize: 13
                    }
                },
                tooltip: {
                    formatter: function (params) {
                        var data = params.data || [0, 0];
                        return '位移：' + data[0].toFixed(2) + '（米）, 载荷：' + data[1].toFixed(2) + '（KN）';
                    }
                },
                grid: {
                    left: '5%',
                    right: '24%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    min: 0,
                    max: Math.floor(Math.max.apply(null, xdata)) + 1,
                    type: 'value',
                    name: '位移(米)',
                    axisLine: { onZero: false }
                },
                yAxis: {
                    min: Math.floor(Math.min.apply(null, ydata)) - 10,
                    max: Math.floor(Math.max.apply(null, ydata)) + 10,
                    type: 'value',
                    name: '载荷(KN)',
                    axisLine: { onZero: false }
                },
                series: [
                  {
                      id: 'a',
                      type: 'line',
                      smooth: true,
                      symbolSize: 1,
                      data: data
                  }
                ]
            };
            myChart.setOption(option);
            charts.push(myChart);
        }
        window.onresize = function () {
            $(charts).each(function (index, chart) {
                chart.resize();
            });
        }
    </script>
}
